<template>
    <div class="order_part">
         
    <!-- 搜索组件 -->
        <SearchbPay :plh_a="placeholdera" :plh_b="placeholderb" :plh_c="placeholderc"></SearchbPay>
        <!-- 表格 -->
        <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
            <el-table-column align="center" show-overflow-tooltip type="selection" width="55"> </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="name" label="名称" width="150px" sortable></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="type" label="支付类型"  width="100px" sortable> </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="pos" label="商户号" sortable ></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="child" label="微信子商户"  sortable> </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="id" label="应用ID"  sortable> </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="encyp" label="加密类型"  sortable> </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="secret" label="商户签名密钥"  sortable> </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="notice" label="通知回调"  sortable> </el-table-column> 
            <el-table-column align="center" show-overflow-tooltip prop="seller" label="支付宝卖家"  sortable> </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="path" label="微信证书" width="200px" sortable> </el-table-column>
            <el-table-column align="center" label="操作" width="250px" >
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination :num="lists.length" router="/pay/pays/"></Pagination>
         <!-- 弹窗 -->
        <el-dialog
        :title="$store.state.hd"
        :visible.sync="$store.state.dialogVisible"
        width="55%"
        >
        <div class="body">
            <el-form label-width="100px" :model="list" :rules="rules" ref="form">
                <el-form-item label-position="right" prop="name" label="名称:">
                    <el-input v-model="list.name"  ></el-input>
                </el-form-item>
                <el-form-item label-position="right" prop="child" label="微信子商户:">
                    <el-input v-model="list.child"  ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="encyp" label="加密类型:">
                    <el-input v-model="list.encyp"  ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="notice" label="通知回调:">
                    <el-input v-model="list.notice"  ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="path" label="微信证书:">
               	     <el-input v-model="list.path" ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="secret" label="商户签名密钥:">
               	     <el-input v-model="list.secret"  ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="seller" label="支付宝卖家:">
               	     <el-input v-model="list.seller"  ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="type" label="支付类型:">
               	     <el-input v-model="list.type"  ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" label="支付宝私钥:">
               	     <el-input  placeholder="请输入支付宝私钥" ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right"  label="微信证书密码:">
               	     <el-input  placeholder="请输入微信证书密码" ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="pos" label="商户号:">
               	     <el-input v-model="list.pos"  ></el-input>
               	</el-form-item>
               	<el-form-item label-position="right" prop="id" label="应用ID:">
               	     <el-input v-model="list.id"  ></el-input>
               	</el-form-item>
            </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
        <el-button @click="$store.state.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subDialog">确 定</el-button>
        </span>
    </el-dialog>
        
    </div>
</template>

<style lang="scss" >

.body {
    .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        
        .el-input {
            width: 100%;
        }
        
    }
    .el-input__inner {
        height: 35px !important;
    }
    .bz {
        display: flex;
        align-items: center;
        span {
            margin-left: 60px;
            margin-right: 10px;
        }
        .el-input {
            width: 70%;
        }
    }
}


</style>
<script>
import Pagination from "@c/Pagination";
import SearchbPay from "@c/Searchb-pay";
export default {
  components: { SearchbPay, Pagination,  },
    data() {
        return {
            placeholdera: '请输入',
            placeholderb: '请输入订单号',
            placeholderc: '请输入应用ID',
            title: '支付配置',
            tableData: [],
            // 预览
            dialogVisible: false,
            list: {},
            // 数据总数
            lists: [],
            rules: {},
            url: '',
        }
    },
    created() {
        this.$store.commit('title', this.title);
        // 预览
        this.$store.commit('dialogVisible', this.dialogVisible)
        this.getData()
        this.getDatas()
    },
    methods: {
        // 请求数据方法
        getData() {
            let params = this.$route.params;
            this.$http.get('/pay/pays', { params })
                .then(({ data }) => {
                   if(!data.errno) {
                       this.tableData = data.data
                   }
                })
            
        },
        getDatas() {
            this.$http.get('/pay/payss')
                .then(({ data }) => {
                   if(!data.errno) {
                       this.lists = data.data
                   }
                })
            
        },

        // 选择项发生变化
        handleSelectionChange() {

        },
        // 编辑
        handleEdit(index, data) {
            this.$store.state.dialogVisible = true;
            this.list = data,
            this.$store.commit('hd', ['编辑', '/pay/pays/updata']);
        
        },
        // 删除
        handleDelete(index, data) {
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$http.get('/pay/pays/delete', { params: {_id: data._id}})
                    .then(({ data }) => {
                        if(!data.errno) {
                           
                            this.$message({
                                message: data.msg,
                                type: 'success'
                            })
                            setTimeout(() => {
                                this.$router.go(0)
                            },1000)
                        }
                    })
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });

        },

        subDialog() {
            this.$store.state.dialogVisible = false
            this.$refs.form.validate(valid => {
                if(valid) {
                    this.$http.post(this.$store.state.url, {data: this.list})
                        .then(({ data }) => {
                            if(!data.errno) {
                                this.$message({
                                message: data.msg,
                                type: 'success'
                            })
                                setTimeout(() => {
                                    this.$router.go(0)
                                },1000)
                            }
                        })
                }
            })
        }

    },
    watch: {
        $route() {
            this.getData()
        }
    }

    
    
}
</script>

